<template>
  <el-popover
      placement="top"
      width="200"
      v-model="visible"
      :style="{ position: 'absolute', left: position.x + 'px', top: position.y + 'px' }"
  >
    <div class="mapping-charts-tips">
      <div class="tips-item">
        <div class="tips-marker">
          <span style="background-color:#9EAEFF"></span>Input:
        </div>
        <div class="tips-val">{{ info.mmt }}</div>
      </div>
      <div class="tips-item">
        <div class="tips-marker">
          <span style="background-color:#99d115"></span>不良数:
        </div>
        <div class="tips-val">{{ info.qty }}</div>
      </div>
      <div class="tips-item" v-if="defectType === 'RATIO'">
        <div class="tips-marker">
          <span style="background-color:#99d115"></span>不良Ratio:
        </div>
        <div class="tips-val">{{ info.ratio }}%</div>
      </div>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: "FabricPopover",
  props: {
    info: {
      type: Object,
      default: () => ({ mmt: 0, qty: 0, ratio: 0 })
    },
    position: {
      type: Object,
      default: () => ({ x: 0, y: 0 })
    },
    visible: {
      type: Boolean,
      default: false
    },
    defectType: {
      type: String,
      default: ""
    }
  }
}
</script>

<style scoped lang="stylus">
.mapping-charts-tips {
  .tips-item {
    margin-bottom: 5px;
    width: 200px;
    display: flex;
    white-space nowrap
  }

  .tips-val {
    margin-left: auto;
  }

  .tips-marker {
    span {
      display: inline-block;
      margin-right: 5px;
      border-radius: 10px;
      width: 10px;
      height: 10px;
    }
  }
}
</style>
